<template>
    <div class="addmodel">
        <div class="model-reporting">
            <div class="mr">模型填报</div>
            <span class="step">
                <span class="blue-circle"><span class="circle-font">1</span></span>
                <span class="step-font">模型填报</span>
                <span class="horizontal-line"></span>
                <span class="white-circle"><span class="circle-font">2</span></span>
                <span class="step-font">模型审核</span>
                <span class="horizontal-line"></span>
                <span class="white-circle"><span class="circle-font">3</span></span>
                <span class="step-font">完成</span>
            </span>
        </div>


        <div class="model-information">
            <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState">
                <a-row :gutter="8">
                    <a-col :span="7" :offset="4">
                        <a-form-item name="source" label="模型来源" v-bind="config">
                            <a-select v-model:value="formState.source">
                                <a-select-option :value="item.label" v-for="item in sources">{{ item.label }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="7" :offset="1">
                        <a-form-item name="address" label="模型地址" v-bind="config">
                            <a-select v-model:value="formState.address">
                                <a-select-option :value="item.label" v-for="item in addresses">{{ item.label }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>

                <div class="line"></div>

                <a-row :gutter="24" class="a-row-class">
                    <a-col :span="7" :offset="1">
                        <a-form-item name="type" label="提交类型" v-bind="config">
                            <a-select v-model:value="formState.type">
                                <a-select-option :value="item.label" v-for="item in types">{{ item.label }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="7">
                        <a-form-item name="version" label="迭代版本" v-bind="config">
                            <a-input v-model:value="formState.version" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="7">
                        <a-form-item name="category" label="大模型类型" v-bind="config">
                            <a-select v-model:value="formState.category">
                                <a-select-option :value="item.label" v-for="item in categories">{{ item.label }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="24" class="a-row-class">
                    <a-col :span="7" :offset="1">
                        <a-form-item name="submitter" label="提交人" v-bind="config">
                            <a-input v-model:value="formState.submitter" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="7">
                        <a-form-item name="submittime" label="申请时间" v-bind="config">
                            <a-date-picker v-model:value="formState.submittime" value-format="YYYY-MM-DD" placeholder="选择日期"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="7">
                        <a-form-item name="email" label="联系邮箱" v-bind="config">
                            <a-input v-model:value="formState.email" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="24">
                    <a-col :span="5" :offset="2">
                        <a-form-item name="first" label="是否是第一次提交" v-bind="config">
                            <a-select v-model:value="formState.first">
                                <a-select-option value="1">是</a-select-option>
                                <a-select-option value="0">否</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" :offset="1">
                        <a-form-item name="key" label="key" v-bind="config">
                            <a-input v-model:value="formState.key"
                                placeholder="如果是第一次提交会在此处生成model key，否则需要输入上一个版本的model key" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="8" :offset="1">
                        <a-form-item name="mirror1" label="镜像地址1" v-bind="config">
                            <a-input v-model:value="formState.mirror1" placeholder="输入获取模型镜像的地址1" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="24">
                    <a-col :span="8" :offset="1">
                        <a-form-item name="mirror2" label="镜像地址2">
                            <a-input v-model:value="formState.mirror2" placeholder="输入获取模型镜像的地址2" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="13" :offset="0">
                        <div class="dragger-position">
                            <a-form-item label="提交相关文档" v-bind="config">
                                <a-form-item name="dragger" no-style>
                                    <a-upload-dragger v-model:fileList="formState.dragger" name="files"
                                        action="/upload.do">
                                        <!-- <p class="ant-upload-drag-icon">
                                            <InboxOutlined />
                                        </p> -->
                                        <p class="ant-upload-text">Click or drag file to this area to upload</p>
                                        <p class="ant-upload-hint">Support for a single or bulk upload.</p>
                                    </a-upload-dragger>
                                </a-form-item>
                            </a-form-item>
                        </div>
                    </a-col>
                </a-row>

                <a-row :gutter="24">
                    <a-col :span="22" :offset="1">
                        <a-form-item name="introduction" label="模型说明" v-bind="config">
                            <a-textarea v-model:value="formState.introduction" class="textarea-class"
                                placeholder="（请说明模型的详细信息，包括但不限于模型的大小、预计所需算力、带宽、数据格式要求等等）" />
                        </a-form-item>
                    </a-col>
                </a-row>


                <div class="button-position">
                    <a-button type="primary" html-type="submit" @click="submit">下一步</a-button>
                    <a-button style="margin-left: 20px" @click="() => formRef.resetFields()">取消</a-button>
                </div>

            </a-form>

        </div>
    </div>
</template>


<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();

const expand = ref(false);
const formRef = ref();
const formState = reactive({
    // source:'',
    // address:'',
    // type:'',
    // version:'',
    // category:'',
    // submitter:'',
    // submittime:'',
    // email:'',
    // first:'',
    // key:'',
    // mirror1:'',
    // mirror2:'',
    // //dragger:'',
    // introduction:'',
});

const sources = reactive([
  { value: '1', label: 'Demo1' },
  { value: '2', label: 'Demo2' },
]);

const addresses = reactive([
  { value: '1', label: 'Demo1' },
  { value: '2', label: 'Demo2' },
]);

const types = reactive([
  { value: '1', label: 'Demo1' },
  { value: '2', label: 'Demo2' },
]);

const categories = reactive([
  { value: '1', label: 'Demo1' },
  { value: '2', label: 'Demo2' },
]);

const config = {
  rules: [
    {
      required: true,
      message: 'Please write something!',
    },
  ],
};

function submit() {
    const apiURL = '你的后端接口地址'; // 替换为你的后端API地址
    // 使用axios发送POST请求
    // axios.post(apiURL, formState)
    //     .then(response => {
    //         // 请求成功处理
    //         console.log('Dictionary sent successfully:', response.data);
    //         alert('字典数据提交成功！');
    //     })
    //     .catch(error => {
    //         // 错误处理
    //         console.error('Error sending dictionary:', error);
    //         alert('提交失败，请检查网络或联系管理员！');
    //     });
    formRef.value.validateFields()
        .then(() => {
            console.log('Form is valid');
            // 执行页面跳转
            router.push({
                path: 'pricemodel',
                query: { inf: JSON.stringify(formState) }
            })
        })
        .catch(() => {
            console.log('Form has errors');
            // 校验失败，不执行页面跳转
        });

    console.log('formState: ', formState);
}

</script>


<style scoped>
.addmodel {
    flex: 1; /* 这会使div填充剩余空间 */
    position: absolute;
    top: 73px;
    left: 15%;
    height: 90%;
    width: 84%;
    border: 2px solid gray;
    
}

.model-reporting {
    border: 1px solid gray;
    height: 50px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    /* 垂直居中 */
}

.model-information {

    /* border: 1px solid gray; */
    height: 88%;
    width: 99%;
    margin-top: 10px;
    padding-top: 20px;
}

.model-reporting .mr {
    margin-left: 15px;
    font-size: 20px;
    font-weight: 700;
    color: rgb(108, 106, 106);
}

.step {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-left: 20%;
}

.step .step-font {
    margin-left: 3px;
    margin-right: 3px;
    font-size: 18px;
    color: rgb(106, 105, 105);
}

.blue-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    /* 这将创建一个圆 */
    background-color: rgb(115, 150, 238);
    /* 设置背景颜色为蓝色 */
    border: 3px solid rgb(115, 150, 238);
    font-size: 20px;
    margin-left: 3px;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.blue-circle .circle-font {
    color: white;
}

.horizontal-line {
    width: 100px;
    /* 横线宽度 */
    height: 2px;
    /* 横线高度 */
    background-color: rgb(178, 175, 175);
    /* 横线颜色 */
}

.white-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    /* 这将创建一个圆 */
    background-color: white;
    /* 设置背景颜色为蓝色 */
    border: 3px solid rgb(178, 175, 175);
    font-size: 20px;
    margin-left: 3px;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.white-circle .circle-font {
    color: rgb(178, 175, 175);
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 2px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
[data-theme='dark'] .ant-advanced-search-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #434343;
  padding: 24px;
  border-radius: 2px;
}
[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
  border: 1px dashed #434343;
  background: rgba(255, 255, 255, 0.04);
}

.line {
    margin-top: -10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 1px; /* 杠的高度 */
    background-color: #494747; /* 杠的颜色 */
    width: 70%; /* 杠的宽度 */
}

/* .a-row-class{
    padding-top: 10px;
    padding-bottom: 10px;
} */

/* 设置label的字体大小 */
/* .ant-form-item-label > label {
  font-size: 36px; 
} */


.dragger-position{
    margin-right: 10%;
    margin-top: -60px;
}

.textarea-class{
    height: 100px;
    max-height: 150px;
}

.button-position{
    margin-left: 42%;
}
</style>